<%@ page contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <style type="text/css">
        header {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #CB0101;
            width: 100%;
            height: 120px;
        }

        .top-line,
        .bottom-line {
            display: flex;
            width: 100%;
        }

        .top-line {
            background-color: whitesmoke;
            height: 30%;
        }
        .bottom-line {
            height: 50%;
        }

        .top-line {
            /*font-size: 16px;*/
            font-weight: 500;
            color: #222222;
            display: flex;
            align-items: center;
        }

        .top-line-left,
        .top-line-right {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .top-line-left {
            width: 40%;
            justify-content: center;
        }

        .top-line-right {
            width: 60%;
            justify-content: flex-end;
        }

        .top-line-left a {
            color: #222222;
        }

        .top-line-left a:hover {
            color: #888888;
        }

        .form-wrapper,
        .greeting-wrapper {
            display: flex;
            height: 80%;
            margin-right: 20px;
            align-items: center;
            justify-content: flex-end;
        }

        .form-wrapper select,
        .form-wrapper input {
            background-color: #FFFFFF;
            vertical-align: middle;
            box-sizing: border-box;
            height: 100%;
            outline: none;
        }

        .form-wrapper select {
            cursor: pointer;
        }

        .form-wrapper select:hover {
            background-color: #F1F1F1;
        }

        .form-wrapper select {
            padding-left: 5px;
            color: #2F4F4F;
        }

        .form-wrapper input {
            text-overflow: ellipsis;
            width: 120px;
            padding-left: 5px;
        }

        .form-wrapper input:-ms-input-placeholder,
        .form-wrapper input::-webkit-input-placeholder {
            color: #2F4F4F;
        }

        .greeting-wrapper .greeting-content {
            margin: 0 10px 0 0;
        }

        .bottom-line {
            justify-content: space-between;
        }
        .bottom-line-left,
        .bottom-line-right {
            width: 50%;
        }
        .bottom-line-left {
            display: flex;
            justify-content: center;
        }
        .bottom-line-left .header-content{
            position: relative;
            top: -10px;
            right: 40px;
            color: #FFFFFF;
            font-size: 38px;
            font-weight: 500;
        }
        .nav {
            height: 100%;
        }

        .nav > ul {
            font-family: "microsoft yahei", Geneva, sans-serif;
            font-weight: 400;
            height: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            justify-content: center;
        }

        .nav > ul > li {
            font-size: 16px;
            letter-spacing: 2px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 120px;
            height: 100%;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
        }

        .nav > ul > li:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .nav a {
            color: whitesmoke;
        }
    </style>
</head>
<body>
<header>
    <div class="top-line">
        <div class="top-line-left">
            <span>访问&nbsp;&nbsp;<a href="#">E-Gov政府服务网</a></span>
        </div>
        <div class="top-line-right">
            <c:if test="${sessionScope.user == null}">
                <label>${requestScope.msg}</label>&nbsp;&nbsp;
                <div id="form-wrapper" class="form-wrapper">
                    <form action="<c:url value="/user/login"/>" method="post" autocomplete="off" name="loginForm">
                        <select name="option" id="login-option" title="option">
                            <option value="0" selected="selected">用户名</option>
                            <option value="1">手机号</option>
                            <option value="2">身份证</option>
                        </select>
                        <input id="username" type="text" name="key" placeholder="请输入您的用户名"/>
                        <input type="password" name="password" placeholder="请输入您的密码"/>
                        <button type="submit" class="btn-sm btn-plain">登录</button>
                        <a href="<c:url value="/user/register"/>" class="btn-sm btn-plain">注册</a>
                    </form>
                </div>
            </c:if>
            <c:if test="${sessionScope.user != null}">
                <div id="greeting-wrapper" class="greeting-wrapper">
                    <div class="greeting-content">您好！ <a href="<c:url value="/user/personal"/>">${sessionScope.user.name == null || sessionScope.user.name == ""? "未命名用户" : sessionScope.user.name}</a></div>
                    <div class="logout">
                        <a href="<c:url value="/user/logout"/>" class="btn-sm btn-plain">退出</a>
                    </div>
                </div>
            </c:if>
        </div>
    </div>
    <div class="bottom-line">
        <div class="bottom-line-left">
            <div class="header-content">E-Gov&nbsp;<span>在线审批</span></div>
        </div>
        <div class="bottom-line-right">
            <div class="nav">
                <ul>
                    <li><a href="${pageContext.request.contextPath}/">首页</a></li>
                    <li><a href="${pageContext.request.contextPath}/personal">个人办事</a></li>
                    <li><a href="${pageContext.request.contextPath}/enterprise">企业办事</a></li>
                    <li><a href="${pageContext.request.contextPath}/progress">进度查询</a></li>
                </ul>
            </div>
        </div>
    </div>
</header>
</body>
</html>